<template>
  <el-card>
    <!-- 标题 -->
    <div slot="header">
      <span class="el-card-title">我的任务</span>
      <i
        v-show="!isPanelSetIcon"
        class="el-icon-close"
        style="float: right; padding: 3px 0"
        @click="deletePanelItem"
      ></i>
      <i
        v-show="isPanelSetIcon"
        class="iconfont icon-caret-right"
        style="float: right; padding: 3px 0"
      ></i>
    </div>
    <!-- 内容 -->
    <div class="mytask-box">
      <el-tabs v-model="activeName" @tab-click="handleStatusChange">
      <el-tab-pane class="myTask"  name="todoTab">
        <span slot="label">待处理 <i class="el-icon-refresh"></i> </span>
        <avue-crud :option="taskOption"
                    :table-loading="loading"
                    :data="taskData"
                    ref="taskCrud"
                    :page.sync="page"
                    @current-change="currentChange"             
                    @on-load="onLoad">
          <template slot-scope="scope" slot="menu">
            <el-button type="text"
                size="small"
                icon="el-icon-s-operation"
                @click="openProcessFlowDialog(scope.row)">处理
            </el-button>
          </template>   
        </avue-crud>    
      </el-tab-pane>
      <el-tab-pane  class="myTask"  label="挂起" name="hangTab">
        <avue-crud :option="hangTaskOption"
                    :table-loading="loading"
                    :data="taskData"
                    ref="hangTaskCrud"
                    :page.sync="page1"
                    @current-change="currentChange"             
                    >
          <template slot-scope="scope" slot="menu">
            <el-button type="text"
                size="small"
                icon="el-icon-s-operation"
                @click="openProcessFlowDialog(scope.row)">查看
            </el-button>
          </template>   
        </avue-crud>    
      </el-tab-pane>
      <el-tab-pane  class="myTask"  label="已处理" name="doneTab">
        <avue-crud :option="doneTaskOption"
                    :table-loading="loading"
                    :data="taskData"
                    ref="doneTaskCrud"
                    :page.sync="page2"
                    @current-change="currentChange"             
                    >
          <template slot-scope="scope" slot="menu">
            <el-button type="text"
                size="small"
                icon="el-icon-s-operation"
                @click="openProcessFlowDialog(scope.row)">查看
            </el-button>
          </template>   
        </avue-crud>    
      </el-tab-pane>
      <el-tab-pane  class="myTask"  label="我发起" name="applyTab">
        <avue-crud :option="applyTaskOption"
                    :table-loading="loading"
                    :data="taskData"
                    ref="applyTaskCrud"
                    :page.sync="page3"
                    @current-change="currentChange"             
                    >
          <template slot-scope="scope" slot="menu">
            <el-button type="text"
                size="small"
                icon="el-icon-s-operation"
                @click="openProcessFlowDialog(scope.row)">查看
            </el-button>
          </template>   
        </avue-crud>    
      </el-tab-pane>
      <el-tab-pane  class="myTask"  label="抄送我" name="ccTab">
        <avue-crud :option="ccOption"
                    :table-loading="loading"
                    :data="taskData"
                    ref="ccTaskCrud"
                    :page.sync="page4"
                    @current-change="currentChange"             
                    >
          <template slot-scope="scope" slot="menu">
            <el-button type="text"
                size="small"
                icon="el-icon-s-operation"
                @click="openProcessFlowDialog(scope.row)">查看
            </el-button>
          </template>   
        </avue-crud>    
      </el-tab-pane>
    </el-tabs>
    
     <!-- 
      流程处理对话框
     -->
    <el-dialog class="bizClass" title="任务处理" 
      top='5vh' 
      width='80%' 
      :destroy-on-close=true 
      :close-on-click-modal='false'
      :visible.sync="processFlowDialog"
      :append-to-body='true'
      @opened="processFlowDialogOpened">
      <div v-if="showTitleLoading" style="width:100%; color:#69b3fc; text-align:center;font-size:25px;top:10px;position:absolute;z-index:5000">
          <i  class="el-icon-loading"></i><span style="font-size:12px;">数据加载中...</span>
      </div>
      <!--动态表单审批对话框-->
      <dynamic-flow-dialog
        v-if="showDynamic"
        ref="dynamicChildDialog"
        :processData="processData"
        :viewOnly="viewOnly"
        @closeProcessFlowDialog='closeProcessFlowDialog'
        @closeLoading="closeLoading">
      </dynamic-flow-dialog>

      <!--每个任务的具体内容1-->
      <biz-apparch-demand
        v-if="showBizDemand"
        ref="bizApparchDemandDialog"
        :processData="processData"
        @closeProcessFlowDialog='closeProcessFlowDialog'
        @closeLoading="closeLoading">
      </biz-apparch-demand>
      <!--每个任务的具体内容2-->

    </el-dialog>
    </div>
  </el-card>
</template>

<script>
import {queryGeneralFlowProcessRecordListPage} from '@/api/general/flow/generalFlowProcessRecordApi';
import {queryGeneralFlowProcessCcRecordListPage} from '@/api/general/flow/generalFlowProcessCcRecordApi';
import {mapGetters} from 'vuex';
import { reqCommonMsg } from '@/util/reqCommonMsg';
import {filterFormat} from '@/util/util';
import DynamicFlowDialog from '@/views/system/form/generalDynamicFlowDialog.vue';
import BizApparchDemand from '@/views/biz/apparch/bizApparchDemandDialog.vue'

export default {
  components: {
    DynamicFlowDialog,
    BizApparchDemand
  },
  props: ['id', 'panelSetIcon'],
  data () {
    return {
      panelId: this.id,
      isPanelSetIcon: this.panelSetIcon,
      activeName: 'todoTab',

      //加载中
      showTitleLoading: false,
      //如果做流程表单 请将次开关设置为true，否则设置为false
      isFlowFrom: true,
      processFlowDialog:false,
      processData: {},
      //各个业务类型显示内容控制
      showDynamic: false,
      showBizDemand: false,
      // 是否只看流程表单
      viewOnly:false,

      tabName: '',
      //待处理任务：
      taskOption: {
        index: true,
        columnBtn: false,
        addBtn: false,
        delBtn: false,
        editBtn:false,
        vireBtn: false,
        refreshBtn: false,
        stripe:true,
        emptyText: '暂无待处理的任务',
        menuWidth: 100,
        column: [
          {
            label: '事项',
            prop: 'bizName', 
            type: 'input',
            width:250
          },{
            label: '处理进度',
            prop: 'processStageStatus', 
            type: 'input', 
          },
          {
            label: '开始处理时间',
            prop: 'processBeginDatetime', 
            type: 'input', 
            width:150
          },
          {
            label: '等待时长',
            prop: 'nodeWaitDuration', 
            type: 'input', 
            width:120
          },
        ]
      },
      taskData: [],

      //已完成事项：
      doneTaskOption: {
        index: true,
        columnBtn: false,
        addBtn: false,
        delBtn: false,
        editBtn:false,
        vireBtn: false,
        refreshBtn: false,
        stripe:true,
        emptyText: '暂无已处理的任务',
        menuWidth: 100,
        column: [ 
          {
            label: '事项',
            prop: 'bizName', 
            type: 'input',
            width:250
          },
          {
            label: '处理进度',
            prop: 'processStageStatus', 
            type: 'input', 
          },
          {
            label: '处理完成时间',
            prop: 'processFinishDatetime', 
            type: 'input', 
            width:150
          },
          {
            label: '处理时长',
            prop: 'nodeWaitDuration', 
            type: 'input', 
            width:120
          },
        ]
      },
      doneTaskData: [],

      // 挂起
      hangTaskOption: {
        index: true,
        columnBtn: false,
        addBtn: false,
        delBtn: false,
        editBtn:false,
        vireBtn: false,
        refreshBtn: false,
        stripe:true,
        emptyText: '暂无已处理的任务',
        menuWidth: 100,
        column: [ 
          {
            label: '事项',
            prop: 'bizName', 
            type: 'input',
            width:250
          },
          {
            label: '处理进度',
            prop: 'processStageStatus', 
            type: 'input', 
          },
          {
            label: '处理完成时间',
            prop: 'processFinishDatetime', 
            type: 'input', 
            width:150
          },
          {
            label: '处理时长',
            prop: 'nodeWaitDuration', 
            type: 'input', 
            width:120
          },
        ]
      },
      hangTaskData: [],

      //已申请任务：
      applyTaskOption: {
        index: true,
        columnBtn: false,
        addBtn: false,
        delBtn: false,
        editBtn:false,
        vireBtn: false,
        refreshBtn: false,
        stripe:true,
        emptyText: '暂无已申请的任务',
        menuWidth: 100,
        column: [
          {
            label: '事项',
            prop: 'bizName', 
            type: 'input',
            width:250
          },
          {
            label: '处理进度',
            prop: 'processStageStatus', 
            type: 'input', 
          },
          {
            label: '发起时间',
            prop: 'processBeginDatetime', 
            type: 'input', 
            width: 150
          },
          {
            label: '等待时长',
            prop: 'nodeWaitDuration', 
            type: 'input', 
            width:120
          }
        ]
      },

      //抄送我的：
      ccOption: {
        index: true,
        columnBtn: false,
        addBtn: false,
        delBtn: false,
        editBtn:false,
        vireBtn: false,
        refreshBtn: false,
        stripe:true,
        emptyText: '暂无抄送任务',
        menuWidth: 100,
        column: [ 
          {
            label: '事项',
            prop: 'bizName', 
            type: 'input',
            width:250
          },
          {
            label: '处理进度',
            prop: 'processStageStatus', 
            type: 'input', 
          },
          {
            label: '处理完成时间',
            prop: 'processFinishDatetime', 
            type: 'input', 
            width:150
          },
          {
            label: '处理时长',
            prop: 'nodeWaitDuration', 
            type: 'input', 
            width:120
          },
        ]
      },
      loading: false,
      // 请求参数区
      page: {
        pageSize: 5,
        pageSizes:[5],
        currentPage: 1,
        total: 0
      },
      // 请求参数区
      page1: {
        pageSize: 5,
        pageSizes:[5],
        currentPage: 1,
        total: 0
      },
      // 请求参数区
      page2: {
        pageSize: 5,
        pageSizes:[5],
        currentPage: 1,
        total: 0
      },
      // 请求参数区
      page3: {
        pageSize: 5,
        pageSizes:[5],
        currentPage: 1,
        total: 0
      },
      // 请求参数区
      page4: {
        pageSize: 5,
        pageSizes:[5],
        currentPage: 1,
        total: 0
      },
      reqParams: {
        singleBody: {},
        listBody: [{}],
        sqlCondition:[],
        orderRule: {},
        currentPage: 1,
        pageSize: 5
      },
      commonData: null,
      conditions: [],
      orderRules: [],
      singleBody: {}
    }
  },
  computed: {
    ...mapGetters(['website','userInfo','orgTree','permission']),
  },
  methods: {
    
    /**
     * 打开流程处理对话框
     */
    async openProcessFlowDialog(row){
      this.processData = row;
      this.showTitleLoading = true;
      this.processFlowDialog = true;
      //按业务类型打开流程对话框
      if(this.processData.bizType == 'dynamic'){
        this.showDynamic = true;
        this.showBizDemand = false;
      }
      else if(this.processData.bizType == 'bizDemand'){
        this.showBizDemand = true;
        this.showDynamic = false;
      }
      //..........
    },
    /**
     * 对话框打开后调用子组件的方法加载数据
     */
    processFlowDialogOpened(){
      //按业务类型查询数据
      if(this.processData.bizType == 'dynamic'){
        this.$refs.dynamicChildDialog.getRecordById();
      }
      else if(this.processData.bizType == 'bizDemand'){
        this.$refs.bizApparchDemandDialog.getRecordById();
      }
      //.........
    },
    /**
     * 子组件数据加载完后回调
     */
    closeLoading(){
      this.showTitleLoading = false;
    },
    /**
     * 关闭对话框
     */
    closeProcessFlowDialog(){
      //按业务类型关闭对话框
      if(this.processData.bizType == 'dynamic'){
        this.showDynamic = false;
      }
      else if(this.processData.bizType == 'bizDemand'){
        this.showBizDemand = false;
      }
      //.........
      this.processFlowDialog = false;
      this.onLoad(this.page);
    },

    /**
     * 状态切换
     */
    handleStatusChange(data){
      this.tabName = data.name;
      if(data.name == 'todoTab'){
        this.singleBody = {
          processUserName: this.userInfo.userName,
          processStatus: ''
        }
      }
      else if(data.name == 'doneTab'){
        this.singleBody = {
          processUserName: this.userInfo.userName,
          processProgressStatus: '已完成',
        }
      }
      else if(data.name == 'applyTab'){
        this.singleBody = {
          processUserName: this.userInfo.userName,
          processStatus: '流程已启动',
        }
      }
      else if(data.name == 'ccTab'){
        this.singleBody = {
          processUserName: this.userInfo.userName,
          processStatus: '抄送',
        }
      }
      else if(data.name == 'hangTab'){
        this.singleBody = {
          processUserName: this.userInfo.userName,
          processProgressStatus: '已暂停',
        }
      }
      this.page.currentPage = 1;
      this.taskData = [];
      this.onLoad(this.page,data.name);
    },
    /**
     * 加载列表数据
     */
    onLoad(page,type) {
      if(!this.singleBody.processUserName){
        this.singleBody = {
          processUserName: this.userInfo.userName,
          processStatus: ''
        }
      }
      this.loading = true;
      this.orderRules = {
        order: 'descending',
        prop: 'process_begin_datetime'
      }
      this.singleBody.validFlag = '1';
      this.reqParams =  {
        singleBody: this.singleBody,
        listBody: [{}],
        sqlCondition: this.conditions,
        orderRule: this.orderRules,
        currentPage: page.currentPage, 
        pageSize: page.pageSize
      }
      this.commonData = reqCommonMsg(this.reqParams)
      if(type == 'ccTab'){
        queryGeneralFlowProcessCcRecordListPage(this.commonData).then(res => {
          const data = res.data.body;
          this.page4.total = data.total;
          this.taskData = data.listBody;
          this.taskData.forEach(element => {
            element.id = element.processId;
            element.processStatus = '人工撤回'
          });
          this.loading = false;
        }, error => {
          this.loading = false; 
        });
      }
      else{
        queryGeneralFlowProcessRecordListPage(this.commonData).then(res => {
          const data = res.data.body;
          this.page.total = data.total;
          this.page1.total = data.total;
          this.page2.total = data.total;
          this.page3.total = data.total;
          this.taskData = data.listBody;
          this.loading = false;
        }, error => {
          this.loading = false; 
        });
      }
    },
    /**
     * 翻页查询
     */
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.onLoad(this.page,this.tabName);
    },
    /**
     * 更改每页条数
     */
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.onLoad(this.page,this.tabName);
    },
    // 删除面板项
    deletePanelItem () {
      this.$emit('deletePanelItemEvent', this.panelId)
    }
  }
}
</script>

<style>
.el-card {
  height: 100%;
}
.el-icon-close {
  font-size: 1.2em;
  cursor: pointer;
}
.el-card-title {
  font-weight: bold;
}
.mytask-box-item {
  display: flex;
  padding: 10px 0;
  border: 1px solid #f2f4f7;
  border-radius: 4px;
  height: 80px;
  margin-bottom: 10px;
  cursor: pointer;
}
.item-left {
  flex: 0 0 15%;
  height: 100%;
  display: flex;
  align-items: center;
}
.progress {
  width: 100%;
  transform: rotate(270deg);
}
.item-right {
  height: 100%;
}
.right-1 {
  display: flex;
  align-items: center;
  flex: 1;
}
.right-1 .task-tip {
  color: #396aff;
}
.right-1 .task-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.right-2 {
  margin-top: 15px;
}
.right-2 i {
  color: #ff394c;
}
.right-2 .task-date,
.task-time {
  color: #7682a8;
  font-size: 14px;
}
.right-2 .task-date {
  margin: 0 20px 0 5px;
}

.mytask-box .avue-crud__menu {
    display: none !important;
}

.mytask-box .el-tabs__header{
  margin: 0 0 0px !important;
}

.mytask-box .el-card__body{
  padding: 5px !important;
}
</style>
